/*遮罩层*/
.mask {
  position: fixed;
  z-index: 101;
  top: 0;
  right: 0;
  left: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
}
@import "@/assets/css/common.scss";

.popup-box {
  position: fixed;
  max-height: 100%;
  // overflow-y: auto;
  transition: 0.3s;
  z-index: 200;
  background: #fff;
  display: flex;
  flex-direction: column;
  // -webkit-overflow-scrolling: touch;
  @include background_color("background_color");
  @include font_color("text-color");
  .pop-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-bottom: 0.3rem;
    font-size: 0.4rem;
    // background-color: #fff;
    box-sizing: border-box;
    .pop-title {
      font-size: 0.48rem;
      color: #303133;
      font-weight: 400;
    }
    .pop-close {
    }
  }
  .pop-body {
    // background-color: #fff;
    font-size: 0.36rem;
    // padding-top: 0.2rem;
    height: 100%;
    width: 100%;
    overflow-y: auto;
  }
}
.safe-area {
  padding-bottom: constant(safe-area-inset-bottom); ///兼容 IOS<11.2/
  padding-bottom: env(safe-area-inset-bottom); ///兼容 IOS>11.2/
}
.pop-center {
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
}

.pop-top {
  top: 0;
  left: 0;
  width: 100%;
}

.pop-right {
  top: 50%;
  right: 0;
  transform: translate3d(0, -50%, 0);
}

.pop-bottom {
  bottom: 0;
  left: 0;
  width: 100%;
  padding-bottom: env(safe-area-inset-bottom);
}

.pop-left {
  top: 50%;
  left: 0;
  transform: translate3d(0, -50%, 0);
}

.pop-slide-top-enter-active,
.pop-slide-left-enter-active,
.pop-slide-right-enter-active,
.pop-slide-bottom-enter-active {
  transition: all 0.3s ease;
}

.pop-slide-top-leave-active,
.pop-slide-left-leave-active,
.pop-slide-right-leave-active,
.pop-slide-bottom-leave-active {
  transition: all 0.3s ease;
}
.pop-slide-top-enter-from,
.pop-slide-top-leave-active {
  transform: translate3d(0, -100%, 0);
}

.pop-slide-right-enter-from,
.pop-slide-right-leave-active {
  transform: translate3d(100%, -50%, 0);
}

.pop-slide-bottom-enter-from,
.pop-slide-bottom-leave-active {
  transform: translate3d(0, 100%, 0);
}

.pop-slide-left-enter-from,
.pop-slide-left-leave-active {
  transform: translate3d(-100%, -50%, 0);
}

.pop-fade {
  &-enter-active {
    animation: 0.3s pop-fade-in both ease-out;
  }

  &-leave-active {
    animation: 0.3s pop-fade-out both ease-in;
  }
}

@keyframes pop-fade-in {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}

@keyframes pop-fade-out {
  from {
    opacity: 1;
  }

  to {
    opacity: 0;
  }
}
